<section id="business">
  <div class="row" *ngIf="error">
    <div class="col-sm-12">
      {{error}}
    </div>
  </div>

  <div class="row" *ngIf="!loaded && !error">
    <div class="col-sm-12 page-load">
      <div class="loading-indicator"></div>
    </div>
  </div>

  <div class="row">
    <a [routerLink]="'/recipe' | localize" [queryParams]="{record: id}" class="mt-3 mb-3"><span class="fa fa-arrow-left"></span>
      {{'recipe.return-link' | translate}}</a>
  </div>

  <h1>{{record.legalName}}</h1>
  <hr>
  <div class="row" *ngIf="loaded">
    <div class="col-md-8 col-sm-7">
      <dl class="row">
        <dt class="col-3" translate>org.locations</dt>
        <dd class="col-9">
          <div class="field-value" *ngFor="let loc of locations">
            <p>{{loc.unitNumber && ('' + loc.unitNumber + '-')}}{{loc.streetAddress}}</p>
            <p>{{loc.municipality}}, {{loc.province}}&nbsp; {{loc.postalCode}}</p>
            <p>{{loc.country}}</p>
          </div>
          <em class="text-muted" *ngIf="!locations.length" translate>general.none</em>
        </dd>
      </dl>
    </div>
    <div class="col-md-4 col-sm-5 d-none d-sm-block">
      <img class="business-badge" src="assets/ribbon.svg" [alt]="'general.verified' | translate">
    </div>
  </div>

  <hr>
  <div class="row" *ngIf="loaded">
    <div class="col-12">
      <div class="card">
        <h3 class="card-header"><span translate>org.certs-title</span></h3>
        <div class="card-body">
          <div class="row" *ngIf="certs.length">
            <a *ngFor="let grp of certs" [routerLink]="['cert', grp.top.id] | localize" class="col-sm-12 col-md-6 col-lg-4 mb-3 credential">
              <div class="card">
                <h3 class="card-header">{{grp.top.typeName}}</h3>
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-6 col-md-8">
                      <div class="issuer">{{grp.top.issuer.name}}</div>
                      <div class="year">{{grp.top.effectiveDate}}</div>
                      <div class="others text-muted" *ngIf="grp.top.inactiveReason && grp.top.inactiveReason.id">
                        <strong class="text-danger">{{grp.top.inactiveReason.shortReason}}</strong>
                      </div>
                      <div class="others text-muted" *ngIf="grp.others.length">
                        <em>And {{grp.others.length}} related</em>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-4 d-none d-sm-block">
                      <img src="assets/cert.svg" [class]="'color-' + grp.top.color" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <em class="text-muted" *ngIf="!certs.length" translate>general.none</em>
        </div>
      </div>
    </div>
  </div>
</section>
